﻿@{
    Layout = null;
}
<script src="~/Scripts/angular.min.js"></script>

<div ng-app="myApp" ng-controller="namesCtrl">

    <p>输入过滤:</p>
    <p>
        <!--test变量绑定-->
        <input type="text" ng-model="test">
    </p>

    列表1：<br />
    <ul>
        <!--orderBy:'country'-->
        <li ng-repeat="x in names | filter:test | orderBy:'country'">
            {{ (x.name | uppercase) + ', ' + x.country }}
        </li>
    </ul>
    列表2：<br/>
    <ul>
        <!--orderBy:'country'-->
        <!--过滤“test”变量-->
        <li ng-repeat="x in names | filter:test | orderBy:'name'">
            {{ (x.name | uppercase) + ', ' + x.country }}
        </li>
    </ul>

</div>

<script>
    angular.module('myApp', []).controller('namesCtrl', function ($scope) {
        $scope.names = [
            { name: 'Jani', country: 'Norway' },
            { name: 'Hege', country: 'Sweden' },
            { name: 'Kai', country: 'Denmark' }
        ];
    });
</script>